<!DOCTYPE html>
<html>
<head>
<!-----------------------------------------------------------------------
- Copyright of this file: Copyright (C) 2025, iwyxdxl
- Licensed under GNU GPL-3.0 or higher, see the LICENSE file for details.
------------------------------------------------------------------------>
    <title>配置编辑器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .section {
            margin-bottom: 30px;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input, select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .success-alert {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
            vertical-align: middle;
        }

        .switch input { 
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 34px;
        }

        .slider::before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4CAF50;
        }

        input:checked + .slider::before {
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round::before {
            border-radius: 50%;
        }

        .switch-container {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .switch-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            transition: background-color 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .nav-button:hover {
            background-color: #45a049;
            color: white;
            text-decoration: none;
        }

        .nav-button.stop {
            background-color: #FF0000; /* 红色 */
        }

        .custom-input {
            display: none;
            margin-top: 5px;
        }

        .entry {
            display: grid;
            grid-template-columns: 2fr 3fr auto; /* 调整列宽比例 */
            gap: 15px;  /* 增加间隙 */
            margin-bottom: 10px;
            align-items: center;
        }

        .entry input, 
        .entry select {
            box-sizing: border-box;  /* 确保宽度计算包含padding */
            min-width: 120px;
            width: 100%;
        }

        .entry select {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 600px) {
            .entry {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            
            .entry button {
                width: 100%;
                margin-top: 5px;
            }
        }
        .backend-closed-alert {
            position: fixed;
            top: 70px;  /* 位于成功提示下方 */
            left: 50%;
            transform: translateX(-50%);
            background-color: #ff4444;
            color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 1000;
            animation: shake 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            25% { transform: translateX(-50%) translateY(-5px); }
            75% { transform: translateX(-50%) translateY(5px); }
        }

    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取 API 服务商相关的 DOM 元素
            const apiProviderSelect = document.getElementById('apiProvider');
            const customApiUrlInput = document.getElementById('customApiUrl');
            const finalApiUrlInput = document.getElementById('finalApiUrl');

            // 获取模型选择相关的 DOM 元素
            const modelSelect = document.getElementById('modelSelect');
            const customModelInput = document.getElementById('customModel');
            const finalModelInput = document.getElementById('finalModel');

            // 根据初始选择显示或隐藏自定义输入框
            if (apiProviderSelect.value === 'other') {
                customApiUrlInput.style.display = 'block';
            } else {
                customApiUrlInput.style.display = 'none';
                finalApiUrlInput.value = apiProviderSelect.value;
            }
            if (modelSelect.value === 'other') {
                customModelInput.style.display = 'block';
            } else {
                customModelInput.style.display = 'none';
                finalModelInput.value = modelSelect.value;
            }

            // 监听 API 服务商下拉选择框变化
            apiProviderSelect.addEventListener('change', function() {
                if (this.value === 'other') {
                    customApiUrlInput.style.display = 'block';
                    // 同时更新隐藏字段为自定义输入框当前值（初始可能为空）
                    finalApiUrlInput.value = customApiUrlInput.value;
                } else {
                    customApiUrlInput.style.display = 'none';
                    finalApiUrlInput.value = this.value;
                }
            });

            // 监听自定义 API 输入框内容变化，实时更新隐藏字段
            customApiUrlInput.addEventListener('input', function() {
                finalApiUrlInput.value = this.value;
            });

            // 监听模型选择下拉选择框变化
            modelSelect.addEventListener('change', function() {
                if (this.value === 'other') {
                    customModelInput.style.display = 'block';
                    finalModelInput.value = customModelInput.value;
                } else {
                    customModelInput.style.display = 'none';
                    finalModelInput.value = this.value;
                }
            });

            // 监听自定义模型输入框内容变化，实时更新隐藏字段
            customModelInput.addEventListener('input', function() {
                finalModelInput.value = this.value;
            });
            
            function addEntry() {
                const container = document.getElementById('listen-list');
                const div = document.createElement('div');
                div.className = 'entry';
                div.innerHTML = `
                    <input type="text" name="nickname" placeholder="微信昵称" required>
                    <select name="prompt_file" required>
                        <option value="">-- 选择Prompt文件 --</option>
                        {% for file in prompt_files %}
                        <option value="{{ file }}">{{ file }}</option>
                        {% endfor %}
                    </select>
                    <button type="button" onclick="removeEntry(this)">删除</button>
                `;
                container.appendChild(div);
            }

            function removeEntry(button) {
                button.parentElement.remove();
            }

            function resetForm() {
                document.querySelector('form').reset();
                const entries = document.querySelectorAll('#listen-list .entry');
                entries.forEach((entry, index) => {
                    if (index === 0) return;
                    entry.remove();
                });
            }

            // 将函数挂载到全局作用域，供内联事件处理器调用
            window.addEntry = addEntry;
            window.removeEntry = removeEntry;

            async function initBotStatus() {
                const button = document.getElementById('botButton');
                try {
                    const statusRes = await fetch('/bot_status?_=' + Date.now());
                    const { status } = await statusRes.json();
                    
                    button.className = status === 'stopped' 
                        ? 'nav-button' 
                        : 'nav-button stop';
                    button.innerHTML = status === 'stopped' 
                        ? 'Start Bot' 
                        : 'Stop Bot';
                } catch (error) {
                    console.error('状态获取失败:', error);
                    button.innerHTML = '状态获取失败';
                }
            }

            initBotStatus();

            // 统一显示提示信息的函数
            function showAlert(message, isSuccess) {
                const alertDiv = document.getElementById('config-alert');
                alertDiv.innerText = message;
                alertDiv.style.backgroundColor = isSuccess ? '#4CAF50' : '#ff4444';
                alertDiv.style.display = 'block';
                setTimeout(() => {
                    alertDiv.style.display = 'none';
                }, 5000);
            }

            // 统一提交配置函数
            async function saveConfig() {
                const form = document.querySelector('form[method="post"]');
                const formData = new FormData(form);
                // 处理多值字段，如果存在 listen_list
                const listenList = Array.from(document.querySelectorAll('[name="listen_list"]'))
                    .map(input => input.value);
                formData.delete('listen_list');
                listenList.forEach(value => formData.append('listen_list', value));

                try {
                    const response = await fetch('/submit_config', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    if (response.status === 204) {
                        showAlert("配置保存成功！", true);
                        return true;
                    } else {
                        showAlert("配置保存失败，请尝试重启程序！", false);
                        return false;
                    }
                } catch (error) {
                    console.error('保存失败:', error);
                    showAlert("配置保存失败，请尝试重启程序！", false);
                    return false;
                }
            }

            // 为表单添加统一提交事件
            const form = document.querySelector('form[method="post"]');
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                // 此处可加入必填项验证逻辑
                await saveConfig();
            });

            // 修改Prompt管理点击处理，先保存配置再跳转
            document.getElementById('promptManagement').addEventListener('click', async function(e) {
                e.preventDefault();
                const success = await saveConfig();
                if (success) {
                    window.location.href = this.href;
                }
            });

            // 修改机器人启动/停止时的配置提交逻辑
            async function toggleBot() {
                const button = document.getElementById('botButton');
                if (!(await checkBotStatus())) {
                    alert('后台服务不可用，请检查服务状态');
                    return;
                }
                button.disabled = true;
                const originalText = button.innerText;
                button.innerHTML = 'Processing...';

                try {
                    const statusRes = await fetch('/bot_status?_=' + Date.now());
                    const { status } = await statusRes.json();
                    
                    if (status === 'stopped') {
                        // 提交配置
                        const formData = new FormData();
                        const nicknames = Array.from(document.querySelectorAll('[name="nickname"]')).map(i => i.value);
                        const promptFiles = Array.from(document.querySelectorAll('[name="prompt_file"]')).map(i => i.value);
                        nicknames.forEach(v => formData.append('nickname', v));
                        promptFiles.forEach(v => formData.append('prompt_file', v));

                        document.querySelectorAll('input[name], select[name]').forEach(element => {
                            if (element.name !== 'nickname' && element.name !== 'prompt_file') {
                                if (element.type === 'checkbox') {
                                    formData.append(element.name, element.checked);
                                } else {
                                    formData.append(element.name, element.value);
                                }
                            }
                        });

                        const configResponse = await fetch('/submit_config', {
                            method: 'POST',
                            body: formData,
                            headers: {'X-Requested-With': 'XMLHttpRequest'}
                        });
                        if (configResponse.status !== 204) {
                            showAlert("配置保存失败，请先停止运行Bot！", false);
                            button.disabled = false;
                            button.innerHTML = originalText;
                            return;
                        } else {
                            showAlert("配置保存成功！", true);
                        }
                    }

                    const targetAction = status === 'stopped' ? 'start_bot' : 'stop_bot';
                    await fetch('/' + targetAction, { method: 'POST' });

                    button.className = status === 'stopped' ? 'nav-button stop' : 'nav-button';
                    button.innerHTML = status === 'stopped' ? 'Stop Bot' : 'Start Bot';

                } catch (error) {
                    console.error('操作失败:', error);
                    button.innerHTML = '操作失败，请重试';
                    setTimeout(() => button.innerHTML = originalText, 2000);
                } finally {
                    button.disabled = false;
                }
            }
                    
            async function checkBotStatus() {
                const button = document.getElementById('botButton');
                const alertDiv = document.getElementById('backend-closed-alert');
                
                try {
                    const statusRes = await fetch('/bot_status?_=' + Date.now());
                    if (!statusRes.ok) throw new Error('请求失败');
                    
                    const { status } = await statusRes.json();
                    button.className = status === 'stopped' ? 'nav-button' : 'nav-button stop';
                    button.innerHTML = status === 'stopped' ? 'Start Bot' : 'Stop Bot';
                    alertDiv.style.display = 'none';
                    return true;
                } catch (error) {
                    console.error('状态检查失败:', error);
                    button.className = 'nav-button';
                    button.innerHTML = 'Start Bot';
                    alertDiv.style.display = 'block';
                    return false;
                }
            }

            let statusCheckInterval = setInterval(checkBotStatus, 5000);

            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    clearInterval(statusCheckInterval);
                } else {
                    checkBotStatus();
                    statusCheckInterval = setInterval(checkBotStatus, 5000);
                }
            });

            checkBotStatus();
            document.getElementById('botButton').addEventListener('click', toggleBot);
        });
    </script>
</head>
<body>
    <div id="backend-closed-alert" class="backend-closed-alert">
        后台已关闭，请重新启动
    </div>
    
    <!-- 修改提示框：用于显示保存成功或失败信息 -->
    <div id="config-alert" class="success-alert" style="display:none;"></div>
    
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
        <h1>配置编辑器</h1>
        <div>
            <button id="botButton" class="nav-button">Start Bot</button>
            <a href="{{ url_for('prompt_list') }}" class="nav-button" id="promptManagement">Prompt管理</a>
        </div>
    </div>

    <form method="post">
        <div class="section">
            <h2>用户列表</h2>
            <div class="form-group">
                <label>微信昵称与对应Prompt配置:</label>
                <div id="listen-list">
                    {% for item in config.LISTEN_LIST %}
                    <div class="entry">
                        <input type="text" name="nickname" value="{{ item[0] }}" placeholder="微信昵称" required>
                        <select name="prompt_file" required>
                            <option value="">-- 选择Prompt文件 --</option>
                            {% for file in prompt_files %}
                            <option value="{{ file }}" {% if item[1] == file %}selected{% endif %}>{{ file }}</option>
                            {% endfor %}
                        </select>
                        <button type="button" onclick="removeEntry(this)">删除</button>
                    </div>
                    {% endfor %}
                </div>
                <button type="button" onclick="addEntry()">添加用户</button>
            </div>
        </div>

        <div class="section">
            <h2>DeepSeek 配置</h2>

            <!-- API 服务商 -->
            <div class="form-group">
                <label>API 服务商: (推荐硅基流动API 注册地址 <a href="https://cloud.siliconflow.cn/i/cAE8wnQ6" target="_blank">https://cloud.siliconflow.cn/</a> 免费15元额度)</label>
                <select id="apiProvider" name="temp_DEEPSEEK_BASE_URL">
                    <option value="https://api.siliconflow.cn/v1/" {% if config.DEEPSEEK_BASE_URL == 'https://api.siliconflow.cn/v1/' %}selected{% endif %}>硅基流动</option>
                    <option value="https://api.deepseek.com" {% if config.DEEPSEEK_BASE_URL == 'https://api.deepseek.com' %}selected{% endif %}>官方API</option>
                    <option value="other" {% if config.DEEPSEEK_BASE_URL not in ['https://api.siliconflow.cn/v1/', 'https://api.deepseek.com'] %}selected{% endif %}>其它</option>
                </select>
                <input type="text" id="customApiUrl"
                    placeholder="请输入自定义API地址"
                    class="custom-input"
                    {% if config.DEEPSEEK_BASE_URL not in ['https://api.siliconflow.cn/v1/', 'https://api.deepseek.com'] %} 
                    value="{{ config.DEEPSEEK_BASE_URL }}"
                    {% endif %}>
                <input type="hidden" id="finalApiUrl" name="DEEPSEEK_BASE_URL" 
                    value="{{ config.DEEPSEEK_BASE_URL }}">
            </div>

            <!-- 模型选择 -->
            <div class="form-group">
                <label>模型选择: (推荐使用V3模型)</label>
                <select id="modelSelect" name="temp_MODEL">
                    <option value="deepseek-ai/DeepSeek-V3" {% if config.MODEL == 'deepseek-ai/DeepSeek-V3' %}selected{% endif %}>硅基V3模型 （可用免费额度）</option>
                    <option value="deepseek-ai/DeepSeek-R1" {% if config.MODEL == 'deepseek-ai/DeepSeek-R1' %}selected{% endif %}>硅基R1模型 （可用免费额度）</option>
                    <option value="Pro/deepseek-ai/DeepSeek-V3" {% if config.MODEL == 'Pro/deepseek-ai/DeepSeek-V3' %}selected{% endif %}>硅基V3 Pro模型 （需充值后方可使用）</option>
                    <option value="Pro/deepseek-ai/DeepSeek-R1" {% if config.MODEL == 'Pro/deepseek-ai/DeepSeek-R1' %}selected{% endif %}>硅基R1 Pro模型 （需充值后方可使用）</option>
                    <option value="deepseek-chat" {% if config.MODEL == 'deepseek-chat' %}selected{% endif %}>官方V3模型</option>
                    <option value="deepseek-reasoner" {% if config.MODEL == 'deepseek-reasoner' %}selected{% endif %}>官方R1模型</option>
                    <option value="other" {% if config.MODEL not in ['deepseek-ai/DeepSeek-V3','deepseek-ai/DeepSeek-R1','Pro/deepseek-ai/DeepSeek-V3','Pro/deepseek-ai/DeepSeek-R1','deepseek-chat','deepseek-reasoner'] %}selected{% endif %}>其它</option>
                </select>
                <input type="text" id="customModel"
                    placeholder="请输入自定义模型名称"
                    class="custom-input"
                    {% if config.MODEL not in ['deepseek-ai/DeepSeek-V3','deepseek-ai/DeepSeek-R1','Pro/deepseek-ai/DeepSeek-V3','Pro/deepseek-ai/DeepSeek-R1','deepseek-chat','deepseek-reasoner'] %} 
                    value="{{ config.MODEL }}"
                    {% endif %}>
                <input type="hidden" id="finalModel" name="MODEL" 
                    value="{{ config.MODEL }}">
            </div>

            
            <div class="form-group">
                <label>API Key:</label>
                <input type="text" name="DEEPSEEK_API_KEY" value="{{ config.DEEPSEEK_API_KEY }}">
            </div>

            <div class="form-group">
                <label>回复最大Token:</label>
                <input type="number" step="100" name="MAX_TOKEN" value="{{ config.MAX_TOKEN }}">
            </div>

            <div class="form-group">
                <label>温度 (0-2): (如果回复出现乱码请将温度调到1.1或0.7以下)</label>
                <input type="number" step="0.1" name="TEMPERATURE" value="{{ config.TEMPERATURE }}">
            </div>
            
        </div>
        
       <div class="section">
            <h2>图片/表情包识别配置</h2>
            <div class="form-group">
                <div class="switch-container">
                    <div class="switch-item">
                        <label><b>启用图片识别功能</b></label>
                        <div class="switch">
                            <label class="switch-label">
                                <input type="checkbox" name="ENABLE_IMAGE_RECOGNITION" {% if config.ENABLE_IMAGE_RECOGNITION %}checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    <div class="switch-item">
                        <label><b>启用表情包识别功能</b></label>
                        <div class="switch">
                            <label class="switch-label">
                                <input type="checkbox" name="ENABLE_EMOJI_RECOGNITION" {% if config.ENABLE_EMOJI_RECOGNITION %}checked{% endif %}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>MOONSHOT_API_KEY: (申请网站 <a href="https://platform.moonshot.cn/" target="_blank">https://platform.moonshot.cn/</a> 免费15元额度)</label>
                <input type="text" name="MOONSHOT_API_KEY" value="{{ config.MOONSHOT_API_KEY }}">
            </div>

            <div class="form-group">
                <label>MOONSHOT_BASE_URL: (一般无需修改)</label>
                <input type="text" name="MOONSHOT_BASE_URL" value="{{ config.MOONSHOT_BASE_URL }}">
            </div>

            <div class="form-group">
                <label>识图模型选择:</label>
                <select name="MOONSHOT_MODEL">
                    <option value="moonshot-v1-128k-vision-preview" {% if config.MOONSHOT_MODEL == 'moonshot-v1-128k-vision-preview' %}selected{% endif %}>moonshot-v1-128k-vision-preview</option>
                    <option value="moonshot-v1-32k-vision-preview" {% if config.MOONSHOT_MODEL == 'moonshot-v1-32k-vision-preview' %}selected{% endif %}>moonshot-v1-32k-vision-preview</option>
                    <option value="moonshot-v1-8k-vision-preview" {% if config.MOONSHOT_MODEL == 'moonshot-v1-8k-vision-preview' %}selected{% endif %}>moonshot-v1-8k-vision-preview</option>    
                </select>
            </div>

            <div class="form-group">
                <label>MOONSHOT温度 (0-1):</label>
                <input type="number" step="0.1" name="MOONSHOT_TEMPERATURE" value="{{ config.MOONSHOT_TEMPERATURE }}">
            </div>
        </div>

        <div class="section">
            <h2>主动表情包配置</h2>
            <div class="form-group">
                <label><b>启用主动表情包功能</b></label>
                <div class="switch">
                    <label class="switch-label">
                        <input type="checkbox" name="ENABLE_EMOJI_SENDING" {% if config.ENABLE_EMOJI_SENDING %}checked{% endif %}>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label>表情包存放目录:</label>
                <input type="text" name="EMOJI_DIR" value="{{ config.EMOJI_DIR }}">
            </div>
        </div>

        <div class="section">
            <h2>群聊消息接收配置</h2>
            <label>群聊消息处理模式:</label>
            <select name="Accept_All_Group_Chat_Messages">
                <option value=False {% if config.Accept_All_Group_Chat_Messages == False %}selected{% endif %}>仅当消息中出现@机器人 时作出回应</option>
                <option value=True {% if config.Accept_All_Group_Chat_Messages == True %}selected{% endif %}>接收无论任何人的任何消息</option>
            </select>
        </div>

        <div class="section">
            <h2>回复间隔配置</h2>
            <div class="form-group">
                <label>消息间隔时间 = 字数 * (平均时间 + 随机时间)</label>
                <label>平均打字速度（秒/字）:</label>
                <input type="text" name="AVERAGE_TYPING_SPEED" value="{{ config.AVERAGE_TYPING_SPEED }}">
                <label>随机打字速度（秒/字）：</label>
                <div style="display: flex; gap: 10px;">              
                    <input type="text" name="RANDOM_TYPING_SPEED_MIN" value="{{ config.RANDOM_TYPING_SPEED_MIN }}">
                    至
                    <input type="text" name="RANDOM_TYPING_SPEED_MAX" value="{{ config.RANDOM_TYPING_SPEED_MAX }}">
                </div>
            </div>
            <div class="form-group">
                <label>消息队列等待时间（建议5-10秒）:</label>
                <input type="number" step="1" name="QUEUE_WAITING_TIME" value="{{ config.QUEUE_WAITING_TIME }}">
            </div>
        </div>

        <div class="section">
            <h2>记忆功能配置</h2>
            <div class="form-group">
                <label><b>启用记忆记录功能</b></label>
                <div class="switch">
                    <label class="switch-label">
                        <input type="checkbox" name="ENABLE_MEMORY" {% if config.ENABLE_MEMORY %}checked{% endif %}>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label>触发临时记忆总结进Prompt的阈值数量（条）:</label>
                <input type="number" step="1" name="MAX_MESSAGE_LOG_ENTRIES" value="{{ config.MAX_MESSAGE_LOG_ENTRIES }}">
            </div>

            <div class="form-group">
                <label>最大记忆数量（条）:</label>
                <input type="number" step="1" name="MAX_MEMORY_NUMBER" value="{{ config.MAX_MEMORY_NUMBER }}">
            </div>

            <div class="form-group">
                <label>临时记忆存放目录:</label>
                <input type="text" name="MEMORY_TEMP_DIR" value="{{ config.MEMORY_TEMP_DIR }}">
            </div>

        </div>

        <div class="section">
            <h2>主动消息配置</h2>

            <div class="form-group">
                <label><b>启用主动消息功能</b></label>
                <div class="switch">
                    <label class="switch-label">
                        <input type="checkbox" name="ENABLE_AUTO_MESSAGE" {% if config.ENABLE_AUTO_MESSAGE %}checked{% endif %}>
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label>主动消息内容:</label>
                <input type="text" name="AUTO_MESSAGE" value="{{ config.AUTO_MESSAGE }}">
            </div>
            
            <div class="form-group">
                <label>主动消息触发时间(小时):</label>
                <div style="display: flex; gap: 10px;">
                    <input type="text" name="MIN_COUNTDOWN_HOURS" value="{{ config.MIN_COUNTDOWN_HOURS }}">
                    至
                    <input type="text" name="MAX_COUNTDOWN_HOURS" value="{{ config.MAX_COUNTDOWN_HOURS }}">
                </div>
            </div>

            <div class="form-group">
                <label>主动消息安静时间段: (请填00:00-23:59 不要填24:00,并请注意中间的符号为英文冒号)</label>
                <div style="display: flex; gap: 10px;">
                    <input type="text" name="QUIET_TIME_START" value="{{ config.QUIET_TIME_START }}" placeholder="HH:MM">
                    至
                    <input type="text" name="QUIET_TIME_END" value="{{ config.QUIET_TIME_END }}" placeholder="HH:MM">
                </div>
            </div>
        </div>

        <div style="margin-top: 20px;">
            <button type="submit">保存配置</button>
            <button type="button" onclick="resetForm()">重置表单</button>
        </div>
    </form>
</body>
</html>
